<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="jie">
  <title>DDNS-GO</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="/static/bootstrap.min.css">
  <link rel="stylesheet" href="/static/common.css">
</head>

<body>
  <header>
    <div class="navbar navbar-dark bg-dark shadow-sm">
      <div class="container d-flex justify-content-between">
        <a href="/" class="navbar-brand d-flex align-items-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2"
            viewBox="0 0 24 24" focusable="false">
            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
            <circle cx="12" cy="13" r="4" /></svg>
          <strong>DDNS-GO</strong>
        </a>
      </div>
    </div>
  </header>
  
  <main role="main" style="margin-top: 30px">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <form action="/save" method="post">

          <button type="submit" class="btn btn-primary" style="margin-bottom: 20px;">Save</button>

          <div class="portlet">
            <h5 class="portlet__head">DNS服务商</h5>
            <div class="portlet__body">
              <div class="form-group">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="DnsName" id="alidns" value="alidns" onclick="alidnsCheckedFun()" {{if eq $.DNS.Name "alidns"}}checked{{end}}>
                  <label class="form-check-label" for="alidns">
                    Alidns(阿里云)
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="DnsName" id="dnspod" value="dnspod" onclick="dnspodCheckedFun()" {{if eq $.DNS.Name "dnspod"}}checked{{end}}>
                  <label class="form-check-label" for="dnspod">
                    Dnspod(腾讯云)
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="DnsName" id="cloudflare" value="cloudflare" onclick="cloudflareCheckedFun()" {{if eq $.DNS.Name "cloudflare"}}checked{{end}}>
                  <label class="form-check-label" for="cloudflare">
                    Cloudflare
                  </label>
                </div>
                <small id="dns_help" class="form-text text-muted"></small>
              </div>
              <div class="form-group">
                <label for="DnsID" id="dnsIdLabel">ID</label>
                <input class="form-control" name="DnsID" id="DnsID" value="{{.DNS.ID}}">
              </div>
           
              <div class="form-group">
                <label for="DnsSecret"id="dnsIdSecret">Secret</label>
                <input class="form-control" name="DnsSecret" id="DnsSecret" value="{{.DNS.Secret}}">
              </div>

            </div>
          </div>

          <div class="portlet">
            <h5 class="portlet__head">IPV4</h5>
            <div class="portlet__body">
                          
              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="ipv4_enable" name="Ipv4Enable" {{if eq $.Ipv4.Enable true}}checked{{end}}>
                <label class="form-check-label" for="ipv4_enable">是否启用</label>
              </div>

              <div class="form-group">
                <label for="ipv4_url">查询URL</label>
                <input type="url" class="form-control" name="Ipv4Url" id="ipv4_url" aria-describedby="ipv4_url_help" value="{{.Ipv4.URL}}">
                <small id="ipv4_url_help" class="form-text text-muted">此URL需返回你的公网IPV4地址。如：https://api-ipv4.ip.sb/ip、https://myip.ipip.net、https://pv.sohu.com/cityjson?ie=utf-8</small>
              </div>

              <div class="form-group">
                <label for="ipv4_domains">Domains</label>
                <textarea class="form-control" id="ipv4_domains" name="Ipv4Domains" rows="3" aria-describedby="ipv4_domains_help">
{{- range $i, $v := .Ipv4.Domains}}
{{$v}}
{{- end -}}
                </textarea>
                <small id="ipv4_domains_help" class="form-text text-muted">一行一个域名</small>
              </div>

            </div>
          </div>

          <div class="portlet">
            <h5 class="portlet__head">IPV6</h5>
            <div class="portlet__body">
                          
              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="ipv6_enable" name="Ipv6Enable" {{if eq $.Ipv6.Enable true}}checked{{end}}>
                <label class="form-check-label" for="ipv6_enable">是否启用</label>
              </div>

              <div class="form-group">
                <label for="ipv6_url">查询URL</label>
                <input type="url" class="form-control" id="ipv6_url" name="Ipv6Url" aria-describedby="ipv6_url_help" value="https://api-ipv6.ip.sb/ip">
                <small id="ipv6_url_help" class="form-text text-muted">此URL需返回你的公网IPV6地址。如：https://api-ipv6.ip.sb/ip、https://v6.myip.la/json、https://speed.neu6.edu.cn/getIP.php</small>
              </div>

              <div class="form-group">
                <label for="ipv6_domains">Domains</label>
                <textarea class="form-control" id="ipv6_domains" name="Ipv6Domains" rows="3" aria-describedby="ipv6_domains_help">
{{- range $i, $v := .Ipv6.Domains}}
{{$v}}
{{- end -}}
                </textarea>
                <small id="ipv6_domains_help" class="form-text text-muted">一行一个域名</small>
              </div>

            </div>
          </div>

          <button type="submit" class="btn btn-primary">Save</button>

        </form>
      </div>
      <div class="col-md-3">
        <p class="font-weight-lighter text-break" style="margin-top: 115px;font-size: 13px;" id="logs"></p>
      </div>
    </div>
  </main>

  <script>
    function getQueryVariable(){
      var query = window.location.search.substring(1);
      if (query === "saveOk=true") {
        window.location.href = "/"
        alert("保存成功")
      }
    }
    getQueryVariable()
    var beforeDnsID=""

    function alidnsCheckedFun() {
      document.getElementById("DnsID").disabled= false
      if (beforeDnsID)
        document.getElementById("DnsID").value= beforeDnsID

      document.getElementById("dnsIdLabel").innerHTML = "AccessKey ID"
      document.getElementById("dnsIdSecret").innerHTML = "AccessKey Secret"
      document.getElementById("dns_help").innerHTML = "https://ram.console.aliyun.com/manage/ak"
    }

    function dnspodCheckedFun() {
      document.getElementById("DnsID").disabled= false
      if (beforeDnsID)
        document.getElementById("DnsID").value= beforeDnsID

      document.getElementById("dnsIdLabel").innerHTML = "ID"
      document.getElementById("dnsIdSecret").innerHTML = "Token"
      document.getElementById("dns_help").innerHTML = "https://console.dnspod.cn/account/token"
    }

    function cloudflareCheckedFun() {
      document.getElementById("dnsIdLabel").innerHTML = "-"
      beforeDnsID = document.getElementById("DnsID").value
      document.getElementById("DnsID").disabled= true
      document.getElementById("DnsID").value= ""
      document.getElementById("dnsIdSecret").innerHTML = "Token"
      document.getElementById("dns_help").innerHTML = "https://dash.cloudflare.com/profile/api-tokens"
    }

    var dnsName = '{{$.DNS.Name}}'

    switch(dnsName){
      case "alidns": {
        alidnsCheckedFun()
        break;
      }
      case "dnspod": {
        dnspodCheckedFun()
        break;
      }
      case "cloudflare": {
        cloudflareCheckedFun()
        break;
      }
      default: {
        alidnsCheckedFun()
        break;
      }
    }
  </script>

  <script>
    function getLogs() {
      var ajax = new XMLHttpRequest();
      ajax.open("get","/logs");
      ajax.send();
      ajax.onreadystatechange = function () {
        if (ajax.readyState==4 &&ajax.status==200) {
          document.getElementById("logs").innerHTML = ajax.responseText
      　}
      }
    }

    getLogs()
    setInterval(getLogs, 5 * 1000)
  </script>

</html>